<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- displays site properly based on user's device -->

    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./assets/images/favicon-32x32.png"
    />

    <title>Frontend Mentor | Social links profile</title>
    <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
    <style>
      html {
        font-size: 16px;
      }
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      /* 基础样式 */
      body {
        position: relative;
        font-family: "Inter", sans-serif;
        font-size: 0.875rem;
        background-color: hsl(0, 0%, 8%);
        height: 100vh;
      }

      .content {
        position: absolute;
        width: 25rem;
        height: 41rem;
        background-color: hsl(0, 0%, 12%);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 3%;
      }

      .img {
        position: relative;
        width: 100%;
        height: 10rem;
      }

      img {
        position: absolute;
        width: 6.25rem;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
      }

      a {
        font-weight: 600;
        display: block;
        text-decoration: none;
        color: hsl(0, 0%, 100%);
        background-color: hsl(0, 0%, 20%);
        padding: 0.875rem;
        border-radius: 8px;
        margin-bottom: 1rem;
        transition: all 0.3s ease;
      }

      .navigation {
        margin-top: -0.5rem;
        width: 100%;
        text-align: center;
        font-size: 1rem;
        gap: 1rem;
        padding: 2rem;
      }

      /* 悬停状态 */
      a:hover {
        background-color: hsl(75, 94%, 57%);
        color: hsl(0, 0%, 12%);
        transform: translateY(0.1875rem);
      }

      /* 聚焦状态 */
      a:focus {
        outline: 0.125rem solid hsl(75, 94%, 57%);
        background-color: hsl(75, 94%, 57%);
        color: hsl(0, 0%, 8%);
      }

      a:active {
        transform: translateY(0); /* 取消上移效果 */
      }

      /* 响应式 */
      @media (max-width: 375px) {
        html {
          font-size: 12px;
        }
      }
      @media (min-width: 375px) and (max-width: 1024px) {
        html {
          font-size: 14px;
        }
      }
      /* 桌面 (1024px+) */
      @media (min-width: 1025px) {
        html {
          font-size: 16px;
        }
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="img">
        <img src="./assets/images/avatar-jessica.jpeg" alt="" />
      </div>
      <h1
        class="name"
        style="
          text-align: center;
          color: hsl(0, 0%, 100%);
          margin-top: 0.625rem;
        "
      >
        Jessica Randall
      </h1>
      <p
        class="location"
        style="
          margin-top: 0.5rem;
          text-align: center;
          color: hsl(75, 94%, 57%);
          font-weight: 600;
        "
      >
        London, United Kingdom
      </p>
      <p
        class="bio"
        style="margin-top: 1.875rem; text-align: center; color: hsl(0, 6%, 77%)"
      >
        "Front-end developer and avid reader."
      </p>

      <!-- 导航区 -->
      <nav class="navigation">
        <a href="#">GitHub</a>
        <a href="#">Fronted Mentor</a>
        <a href="#">LinKedIn</a>
        <a href="#">Twitter</a>
        <a href="#">Instagram</a>
      </nav>
    </div>
  </body>
</html>
